<template>
    <div class="bjcss" @dblclick="quanping" :class="isFullScreen?'fullscreen':''">
        <div class="whgd">
            <div class="bticss">
                <img src="/@/views/panimg/xiaoshoutitle.png" style="width: 100%;">
                <div class="titletop"></div>
                <div class="riqicss">{{date}}</div>
            </div>
            <div class="kanbanviewcss">
                <div class="cprkbk" @click="tzhjMX('cwcprumx')">
                    <div class="biaoti1">成品入库</div>
                    <div class="textrengt textkey" style="margin-top: 10px;">成品入库情况</div>
                    <div class="textrengt zitiwenjain">{{cpru.rksl}}</div>
                    <div class="textrengt textkey">台数</div>
                    <div class="textrengt zitiwenjain">{{cpru.ts}}</div>
                </div>
                <div>
                    <div class="cprkutu">
                        <img src="/@/views/panimg/cprkutu.png" class="wh100">
                    </div>
                    <div class="ruku-fahuo">
                        <img src="/@/views/panimg/ruku-fahuo.png" class="wh100">
                    </div>
                    <div class="fhsqtu">
                        <img src="/@/views/panimg/fhsqtu.png" class="wh100">
                    </div>
                    <div class="fhsq-zxck">
                        <img src="/@/views/panimg/fhsq-zxck.png" class="wh100">
                    </div>
                    <div class="zxcktu">
                        <img src="/@/views/panimg/zxcktu.png" class="wh100">
                    </div>
                    <div class="wkpqktu">
                        <img src="/@/views/panimg/wkpqktu.png" class="wh100">
                    </div>
                    <div class="ndwhktu">
                        <img src="/@/views/panimg/ndwhktu.png" class="wh100">
                    </div>
                    <div class="zxck-ndwhk">
                        <img src="/@/views/panimg/zxck-ndwhk.png" class="wh100">
                    </div>
                    <div class="wkp-ndwhk">
                        <img src="/@/views/panimg/wkp-ndwhk.png" class="wh100">
                    </div>
                    <div class="zxck-kpqk">
                        <img src="/@/views/panimg/zxck-kpqk.png" class="wh100">
                    </div>
                    <div class="kpqktu">
                        <img src="/@/views/panimg/kpqktu.png" class="wh100">
                    </div>
                    <div class="fenzhitiao">
                        <img src="/@/views/panimg/fenzhitiao.png" class="wh100">
                    </div>
                    <div class="hkqktu2">
                        <img src="/@/views/panimg/hkqktu2.png" class="wh100">
                    </div>
                    <div class="whkqk2">
                        <img src="/@/views/panimg/whkqk2.png" class="wh100">
                    </div>
                    <div class="ndhk">
                        <img src="/@/views/panimg/ndhk.png" class="wh100">
                    </div>
                    <div class="jw1">
                        <img src="/@/views/panimg/jw1.png" class="wh100">
                    </div>
                    <div class="jw2">
                        <img src="/@/views/panimg/jw2.png" class="wh100">
                    </div>
                </div>
                <div>
                    <div class="fhsqwen">
                        <div class="biaoti1" style="width: 100px;">发货申请</div>
                        <div class="textrengt textkey" style="margin-top: 15px;width: 133px;" @click="tzhjMX('cwfhsq7mx')">7天内发货申请</div>
                        <div class="textrengt zitiwenjain" style="width: 133px;" @click="tzhjMX('cwfhsq7mx')">{{fhsq.qi}}</div>
                        <div class="textrengt textkey" style="width: 133px;" @click="tzhjMX('cwfhsq8mx')">8-15天内发货申请</div>
                        <div class="textrengt zitiwenjain" style="width: 133px;" @click="tzhjMX('cwfhsq8mx')">{{fhsq.sw}}</div>
                        <div class="textrengt textkey" style="width: 133px;" @click="tzhjMX('cwfhsq16mx')">16-30天内发货申请</div>
                        <div class="textrengt zitiwenjain" style="width: 133px;" @click="tzhjMX('cwfhsq16mx')">{{fhsq.ss}}</div>
                    </div>
                    <div class="zxckwen" @click="tzhjMX('cwzxckmx')">
                        <div class="biaoti1">装箱出库</div>
                        <div class="textrengt textkey" style="margin-top: 10px;">出库单据数量</div>
                        <div class="textrengt zitiwenjain">{{ck}}</div>
                    </div>
                    <div class="kpqkwen">
                        <div class="biaoti1" style="width: 245px;margin-top: -5px;">开票情况</div>
                        <div @click="tzhjMX('cwkpqkmxwx')" class="textrengt textkey" style="margin-top: 20px;width: 209px;display: flex;align-items: center;justify-content: right;">
                            <div>外销：</div>
                            <div class="zitiwenjain">{{wkp.w}}</div>
                        </div>
                        <div @click="tzhjMX('cwkpqkmxnx')" class="textrengt textkey" style="margin-top: 10px;width: 209px;display: flex;align-items: center;justify-content: right;">
                            <div>内销：</div>
                            <div class="zitiwenjain">{{wkp.n}}</div>
                        </div>
                    </div>
                    <div class="hkqkwen" @click="tzhjMX('cwhkqkmx')">
                        <div class="textkey" style="width: 143px;margin-left: 20px;">
                            回款情况-预收：<div class="zitiwenjain">{{hkqk.ys}}</div>
                        </div>
                        <div class="textkey" style="width: 143px;margin-left: 20px;margin-top: 0px">
                            回款情况-收款：<div class="zitiwenjain">{{hkqk.sk}}</div>
                        </div>
                    </div>
                    <div class="whkqkwen" @click="tzhjMX('cwwhkqkmx')">
                        <div class="textkey" style="width: 143px;margin-left: 20px;">
                            未回款情况<div class="zitiwenjain">{{wskje}}</div>
                        </div>
                    </div>
                    <div class="ndhkwen">
                        <div class="biaoti1" style="width: 100px;" @click="tzhjMX('cwndhkmx')">年度回款</div>
                        <div class="textrengt textkey" style="margin-top: 15px;width: 133px;">收款金额</div>
                        <div class="textrengt zitiwenjain" style="width: 133px;">{{ndhk}}</div>
                    </div>
                    <div class="wkpqkwen">
                        <div class="biaoti1" style="width: 120px;">未开票情况</div>
                        <div class="textrengt textkey" @click="tzhjMX('cwwkpqkmxwx')" style="margin-top: 25px;margin-left: 10px;width: 171px;text-align: left;">外销：<span class="zitiwenjain">{{wwkp.w}}</span></div>
                        <div class="textrengt textkey" @click="tzhjMX('cwwkpqkmxnx')" style="margin-top: 10px;margin-left: 10px;width: 171px;text-align: left;">内销：<span class="zitiwenjain">{{wwkp.n}}</span></div>
                    </div>
                    <div class="ndwhkwen">
                        <div class="biaoti1" style="width: 85px;margin-left: 22px;">年度未回款</div>
                        <div class="textrengt textkey" style="margin-top: 10px;">收款金额</div>
                        <div class="textrengt zitiwenjain">{{ndwhk}}</div>
                    </div>
                </div>
                <div>
                    <div class="byhktu">
                        <img src="/@/views/panimg/byhktu.png" class="wh100">
                    </div>
                    <div class="byhktu2">本月回款</div>
                    <div class="byhktu3">本月回款金额</div>
                    <div class="byhktubk">
                        <div class="byhkvalue">78654</div>
                    </div>
                    <div class="xsddtu">
                        <img src="/@/views/panimg/xsddtu.png" class="wh100">
                    </div>
                    <div class="xsddtu2">新增销售订单</div>
                    <div class="xsddtu3">本月订单数量</div>
                    <div class="xsddtubk">
                        <div class="byhkvalue">562</div>
                    </div>
                </div>
                <div v-if="xian" class="tubiao" id="main"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import{ref,onMounted,onUnmounted} from "vue"
    import * as echarts from 'echarts';
    import {mianbanData,mianbanData2} from "/@/api/panel/index"
    import {useRouter} from 'vue-router'
    const router =useRouter()
    let isFullScreen = ref(false)
    let date = ref('2024年8月1日')
    let jilvdingshiqi = ref(null)
    let mymain = ref(null)
    let cpru = ref({
        rksl:0,
        ts:0
    })
    let fhsq = ref({
        qi:0,
        sw:0,
        ss:0
    })
    let ck=ref(0)
    let wkp = ref({
        n:0,
        w:0
    })
    let wwkp=ref({
        n:0,
        w:0
    })
    let hkqk = ref({
        ys:0,
        sk:0
    })
    let cwcpklData=ref({
        y:0,
        s:0,
        w:0
    })
    let cwclklData=ref({
        y:0,
        s:0,
        w:0
    })
    let wskje = ref(0)
    let ndhk = ref(0)
    let ndwhk = ref(0)
    var option = ref( {
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: ['product', '成品库存', '材料库存'],
            source: [
            { product: '一年', "成品库存": 0, "材料库存": 0},
            { product: '三年', "成品库存": 0, "材料库存": 0 },
            { product: '五年', "成品库存":0, "材料库存": 0  }
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }]
    });
    let xian = ref(true)
    onUnmounted(()=>{
        console.log('页面卸载');
        xian.value=false
    })
    onMounted(()=>{
        xian.value=true
        console.log("1234567890",mymain.value);
        setTimeout(()=>{
            // 基于准备好的dom，初始化echarts实例
            if(!mymain.value){
                mymain.value = echarts.init(document.getElementById('main'),'dark');
            }
            // 使用刚指定的配置项和数据显示图表。
            mymain.value.setOption(option.value);
        },500)
        
        getdate()
        getList()
    })

    // 去往明细
    const tzhjMX = (value)=>{
        router.push({path:"/ranelmingxi",query: { id: value}})
    }
    const getList=()=>{
        // 材料库龄
        mianbanData('cwclkl').then((res)=>{
            if(res.data){
                res.data.forEach((item)=>{
                    if(item.expalin=='1年'){
                        cwclklData.value.y=item.num
                        option.value.dataset.source[0]['材料库存']=item.num
                    }else if(item.expalin=='3年'){
                        cwclklData.value.s=item.num
                        option.value.dataset.source[1]['材料库存']=item.num
                    }else if(item.expalin=='5年'){
                        cwclklData.value.w=item.num
                        option.value.dataset.source[2]['材料库存']=item.num
                    }
                })
                setTimeout(()=>{
                    mymain.value.setOption(option.value);
                },500)
                
            }
        })
        // 成品库龄
        mianbanData('cwcpkl').then((res)=>{
            if(res.data){
                res.data.forEach((item)=>{
                    if(item.expalin=='1年'){
                        cwcpklData.value.y=item.num
                        option.value.dataset.source[0]['成品库存']=item.num
                    }else if(item.expalin=='3年'){
                        cwcpklData.value.s=item.num
                        option.value.dataset.source[1]['成品库存']=item.num
                    }else if(item.expalin=='5年'){
                        cwcpklData.value.w=item.num
                        option.value.dataset.source[2]['成品库存']=item.num
                    }
                })
                setTimeout(()=>{
                    mymain.value.setOption(option.value);
                },500)
            }
        })
        // 成品入库
        mianbanData('cwcpru').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.explain=='入库单数量'){
                        cpru.value['rksl']=element.num.match(/^\d+(?:\.\d{0,2})?/)[0]
                        
                    }else{
                        cpru.value['ts']=element.num.match(/^\d+(?:\.\d{0,2})?/)[0]
                    }
                });
            }
        })
        // 发货申请
        mianbanData('cwfhsq').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='7天内'){
                        fhsq.value['qi']=element.num
                    }else if(element.expalin=='8-15天'){
                        fhsq.value['sw']=element.num
                    }else if(element.expalin=='16-30天'){
                        fhsq.value['ss']=element.num
                    }
                });
            }
        })
        // 装箱出库 cwzxck
        mianbanData('cwzxck').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.explain=='出库单据数量'){
                        ck.value=element.num
                        
                    }
                });
            }
        })
        // 开票情况 
        mianbanData('cwkpqk').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='外销'){
                        wkp.value['w']=element.num
                    }else if(element.expalin=='内销'){
                        wkp.value['n']=element.num
                    }
                });
            }
        })
        // 年度未回款
        mianbanData('cwndwhk').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='未收款总额'){
                        ndwhk.value=element.num.match(/^\d+(?:\.\d{0,2})?/)[0]
                    }
                });
            }
        })
        // 未开票情况cwwkpqk
        mianbanData('cwwkpqk').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='外销'){
                        wwkp.value['w']=element.num
                    }else if(element.expalin=='内销'){
                        wwkp.value['n']=element.num
                    }
                });
            }
        })
        // 回款情况
        mianbanData('cwhkqk').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='预收'){
                        hkqk.value['ys']=element.num
                    }else if(element.expalin=='普通收款'){
                        hkqk.value['sk']=element.num
                    }
                });
            }
        })
        // 回款情况
        mianbanData('cwwhkqk').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='未收款金额'){
                        wskje.value=element.num.match(/^\d+(?:\.\d{0,2})?/)[0]
                    }
                });
            }
        })
        // 年度回款情况
        mianbanData('cwndhk').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.expalin=='收款总额'){
                        ndhk.value=element.num.match(/^\d+(?:\.\d{0,2})?/)[0]
                    }
                });
            }
        })
    }
    const getdate=()=>{
        // 创建一个新的Date对象，它将包含当前日期和时间
        var currentDate = new Date();
        
        // 获取当前日期的各个部分
        var year = currentDate.getFullYear(); // 获取年份
        var month = currentDate.getMonth() + 1; // 获取月份，+1因为getMonth()返回的月份从0开始
        var day = currentDate.getDate(); // 获取日
        date.value=`${year}年${month}月${day}日`
    }
    const quanping = (element)=>{
        console.log(element);
        
        isFullScreen.value=!isFullScreen.value
        if(isFullScreen.value){
            requestFullScreen(document.documentElement)
        }else{
            requestFullScreen2(document.documentElement)
        }
    }
    const requestFullScreen = (element) =>{
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
            requestMethod.call(element);
        } else if (
            typeof window.ActiveXObject !== "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    };
    const requestFullScreen2 = (element) =>{
        document.exitFullscreen();
    };
</script>
<style>
    @import url("index.css");
    @font-face {
    font-family: electronicFont;
    src: url(./imaget/DS-DIGI-1.ttf);
    }
    .wh100{
        width: 100%;
        height: 100%;
    }
    .bjcss{
        width:100%;
        height: 100vh;
        background-color: rgb(1, 7, 20);
        overflow: auto;
    }
    .whgd{
        width: 1920px;
        height: 1080px;
        font-size: 12px;
        box-sizing: border-box;
        background-image: url('/@/views/linkoo/panel/imaget/25D.png'); /* 设置背景图片 */
        background-size: 100% 100%; /* 背景图片覆盖整个元素 */
        background-repeat: no-repeat; /* 背景图片不重复 */
        background-position: center; /* 背景图片居中 */
    }
    .fullscreen{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }
</style>